<!--管家服务考核管理-->
<template>
  <div class="mod-config">
  <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
    <el-form-item label="季度">
      <el-select v-model="dataForm.quarterTime" placeholder="请选择">
        <el-option
          v-for="item in dateTime"
          :key="item.val"
          :label="item.label"
          :value="item.val"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="会员身份">
      <el-select v-model="dataForm.userGrade" placeholder="全部">
        <el-option
          v-for="item in options"
          :key="item.val"
          :label="item.label"
          :value="item.val"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="管家服务评价结果" v-if="isShow">
      <el-select v-model="dataForm.avgWholeScore" placeholder="全部">
        <el-option
          v-for="item in evaluationResult"
          :key="item.val"
          :label="item.label"
          :value="item.val"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="dataForm.phone" placeholder="手机号" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search()">查询</el-button>
      <el-button type="primary" @click="download()">下载数据</el-button>
    </el-form-item>
  </el-form>
<!--    列表-->
  <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
    <!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
    <el-table-column prop="examResultRank" header-align="center" align="center" label="季度考核结果排序">
      <template slot-scope="scope">
        <span>{{ scope.row.examResultRank === null ? "——" : scope.row.examResultRank}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
    <el-table-column prop="coverUrl" header-align="center" align="center" label="头像">
      <template slot-scope="scope">
        <img :src="scope.row.avatar" style="width: 40px;height: 40px;" />
      </template>
    </el-table-column>
    <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
    <el-table-column prop="userGrade" header-align="center" align="center" label="会员身份">
      <template slot-scope="scope">
        {{scope.row.userGrade==1 ?'会员':''}}
        {{scope.row.userGrade==2 ?'经理':''}}
        {{scope.row.userGrade==3 ?'总监':''}}
      </template>
    </el-table-column>
    <el-table-column header-align="center" align="center" label="管家服务考核评价情况（已评/未评）">
      <template slot-scope="scope">
        <span>{{scope.row.commentNum }}/{{scope.row.allCommentNum}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="avgWholeScore" header-align="center" align="center" :label=dataForm.housekeeperServiceLabel >
      <template slot-scope="scope">
<!--        <span style="color: #aa1111">{{(parseInt(scope.row.avgWholeScore) === 0) ? '未评' : "" }}</span>-->
        <span>{{isShow ? '——' : "" }}</span>
        <span>{{isShow?"":scope.row.avgWholeScore}}</span>
        <span>{{!isShow && scope.row.hasSubordinate===0?"(无下级)":""}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="subordinateGrade" header-align="center" align="center" label="管家服务考核等级">
      <template slot-scope="scope">
        <span>{{ scope.row.subordinateGrade === 1 ? '优秀' : '' }}</span>
        <span>{{ scope.row.subordinateGrade === 2 ? '良好' : '' }}</span>
        <span>{{ scope.row.subordinateGrade === 3 ? '待提升' : '' }}</span>
        <span>{{ parseInt(scope.row.subordinateGrade) === 0 ? '——' : '' }}</span>
      </template>
    </el-table-column>
    <el-table-column header-align="center" align="center" label="查看结果">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="showWait(scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="sizeChangeHandle"
    @current-change="currentChangeHandle"
    :current-page="pageIndex"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    :total="totalPage"
    layout="total, sizes, prev, pager, next, jumper"
  ></el-pagination>
    <!--考核结果查看-->
    <housekeeper-service-view-result ref="viewResult"></housekeeper-service-view-result>
  </div>

</template>

<script>
    import HousekeeperServiceViewResult from "./housekeeperServiceViewResult";
    export default {
        name: "housekeeperServiceManageList",
        components: {HousekeeperServiceViewResult},
        data() {
            return {
                options: [
                    {
                        val: null,
                        label: "全部"
                    },
                    {
                        val: "1",
                        label: "普通会员"
                    },
                    {
                        val: "2",
                        label: "经理"
                    },
                    {
                        val: "3",
                        label: "总监"
                    }
                ],
                //季度时间
                dateTime: [
                    {
                        val: "201910",
                        label: "2019.10-2019.12"
                    },
                    {
                        val: "201907",
                        label: "2020.01-2020.03"
                    },
                    {
                        val: "202004",
                        label: "2020.04-2020.06"
                    }
                ],
                //评价结果
                evaluationResult: [
                    {
                        val: "3",
                        label: "全部"
                    },
                    {
                        val: "1",
                        label: "已评价"
                    },
                    {
                        val: "0",
                        label: "未评价"
                    }
                ],

                dataForm: {
                    quarterTime:"201910", // quarterTime:季度（201901是2019第一季度，201904第二季度，以此类推）
                    userGrade:"", //   userGrade:会员身份
                    avgWholeScore:"3",  //     avgWholeScore:0未评、1已评 3全部
                    subordinateGrade:"", //  1为优秀 2为良好 3为待提升 ,
                    key: "",
                    rember: "",
                    uid: "",
                    phone: "",
                    nickname: "",
                    title: "",
                    housekeeperServiceLabel:"管家服务评价得分",

                },
                isShow: false, //开发评价  true 已评价完
                userId: "",
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                addOrUpdateVisible: false,
                bookmanages: true
            };
        },
        mounted() {
            this.getQuarterTime();
            // this.getDataList();
        },
        methods: {
            search(){
                this.pageIndex = 1;
                this.getDataList();
            },

            // 获取季度列表
            getQuarterTime(){
                const that = this
                this.$http({
                    url:this.$http.adornUrl("/value/valuecommentinfo/getQuarterTime"),
                    method:"get",
                }).then(({ data }) => {
                    if (data && data.code === 0) {

                        // this.datetime.length = 0;
                        that.dateTime = []

                        let arr = []
                        for (let i = 0;i<data.quarterTime.length;i++) {

                            let dateStr = data.quarterTime[i];
                            let dateYearStr = dateStr.slice(0, 4);
                            let dateMonthStr = dateStr.slice(4, 6);
                            let dateLabel = dateYearStr+"."+dateMonthStr+"-"+dateYearStr+"."+ (parseInt(dateMonthStr)+2);
                            let obj = {
                                val:dateStr,
                                label:dateLabel
                            }
                            arr.push(obj);
                        }

                        that.dataForm.quarterTime = arr[arr.length-1].val
                        that.dateTime = arr

                        that.getDataList()

                    } else {

                    }
                });
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let obj = {
                    page: this.pageIndex,
                    limit: this.pageSize
                };
                if (this.dataForm.quarterTime) {
                    obj.quarterTime = this.dataForm.quarterTime;
                }
                if (this.dataForm.userGrade) {
                    obj.userGrade = this.dataForm.userGrade;
                }
                if (this.dataForm.avgWholeScore) {
                    obj.avgWholeScore = this.dataForm.avgWholeScore;
                }
                if (this.dataForm.nickname) {
                    obj.nickname = this.dataForm.nickname;
                }
                if (this.dataForm.phone) {
                    obj.phone = this.dataForm.phone;
                }

                this.$http({
                    url: this.$http.adornUrl("/value/stewardserviceinfo/list"),
                    method: "get",
                    params: this.$http.adornParams(obj)
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list;
                        this.totalPage = data.page.totalCount;
                        this.isShow = data.isFlag === 1?true:false;
                        this.dataForm.housekeeperServiceLabel = this.isShow?"管家服务考核得分":"管家服务考核结果";
                    } else {
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });
            },

            showWait(object) {

                let resultObject = {
                    quarterTime : this.dataForm.quarterTime,
                    valueId:object.id,
                    title:this.dataForm.housekeeperServiceLabel,
                    avgWholeScore:object.avgWholeScore,
                    subordinateGrade:object.subordinateGrade
                }

                this.$nextTick(() => {

                    this.$refs.viewResult.init(resultObject,this.isShow);
                });
            },
            goBack() {
                this.bookmanages = true;
            },

            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },

            download() {
                let obj = {
                    page: this.pageIndex,
                    limit: this.pageSize
                };
                obj.quarterTime = this.dataForm.quarterTime;

                if (this.dataForm.userGrade) {
                    obj.userGrade = this.dataForm.userGrade;
                }

                if (this.dataForm.avgWholeScore) {
                    obj.avgWholeScore = this.dataForm.avgWholeScore;
                }

                if (this.dataForm.phone) {
                    obj.phone = this.dataForm.phone;
                }

                if (this.dataForm.nickname) {
                    obj.nickname = this.dataForm.nickname;
                }



                this.$http({
                    url: this.$http.adornUrl("/value/stewardserviceinfo/list/download"),
                    method: "get",
                    params: this.$http.adornParams(obj),
                    headers: {
                        'Content-Type': 'application/json; application/octet-stream'
                    },
                    responseType: 'arraybuffer'
                }).then(({ data }) => {
                    const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
                    const downloadElement = document.createElement('a')
                    const href = window.URL.createObjectURL(blob)
                    downloadElement.href = href
                    downloadElement.download = '管家服务考核管理列表.xls'
                    document.body.appendChild(downloadElement)
                    downloadElement.click()
                    document.body.removeChild(downloadElement) // 下载完成移除元素
                    window.URL.revokeObjectURL(href) // 释放掉blob对象
                })
            }
        }
    }
</script>

<style scoped>

</style>
